<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热词</title>
	<script src="../components/echarts-4.0.4.min.js"></script>
	<style>
		body,html{
			padding: 0;
			margin: 0;
			background:#0A0F23;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<div style="width: 100%;height: 100%;" id="hotWord"></div>
</body>
<script>
	var hotWord = echarts.init(document.getElementById('hotWord'));
    var hotWordData = {
        title: '2017年行业知识增长量',
        xData:['商标','标准','专利','文献','版权','其他'],
		sData:[159,457,316,513,34,157]
	};

	var option = {
		title: {
			text: hotWordData.title,
			left: 'center',
			top:"13%",
            textStyle: {
                fontSize: 22,
                color: '#fff'
            }
		},
		grid: {
			left: '5%',
			right: '10%',
			bottom: '0%',
			top:"22%",
			height:"65%",
			containLabel: true
		},
		xAxis: {
			type : 'value',
			axisLine: {
	            lineStyle: {
	                color: '#fff'
	            }
	        },
	        axisTick: {
			    show: false,
	        	alignWithLabel: true,
	            lineStyle: {
	                color: '#fff'
	            }
	        },
            axisLabel:{
			    show: true,
				lineStyle: {
					color: '#fff'
				}
			},
			splitLine: {
	            show: false
	       	}
		},
		yAxis: {
			type: 'category',
			data: hotWordData.xData,
			inverse:true,
			axisTick: {
				alignWithLabel: true
			},
			axisLine: {
                show: true,
				lineStyle: {
					color: '#fff'
				}
			},
            axisLabel:{
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            }
		},
		series: [
			{
				name: '政策名称：',
				type: 'bar',
				data: hotWordData.sData,
				barWidth :"25%",
				itemStyle:{
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            offset: 1,
                            color: '#297bcd'
                        }, {
                            offset: 0,
                            color: '#0de2ff'
                        }]),
                        shadowColor: '#297bcd',
                        shadowBlur: 10
                    }
                },
				label: {
	                normal: {
	                    show: true,
	                    position: 'right',
						color:"#fff"
	                }
	            }
			}
		]
	};
    hotWord.setOption(option);
</script>
</html>